<div id="vue_picker" v-show="isShow">
    <div :class="['fui-mask-picker',(isShowClass ? 'visible':'')]" @click="closePicker"></div>
    <div :class="['fui-modal','picker-modal',(isShowClass ? 'in':'out')]">
        <div class="option-picker">
            <div class="option-picker-inner">
                <div class="option-picker-cell goodinfo">
                    <div class="closebtn" @click="closePicker"><i class="icon icon-guanbi"></i></div>
                    <div class="img"><img class="thumb" :src="goods.thumb"></div>
                    <div class="info info-price text-danger">
                <span>
                    ￥
                    <span class="price">
                    {{ showPrice }}
                    </span>
                </span>
                    </div>
                    <div class="info info-total">
                    </div>
                    <div class="info info-titles" v-show="selectTitle">已选 {{ selectTitle }}</div>
                    <div class="info info-titles" v-show="!selectTitle">请选择规格</div>
                </div>
                <div class="option-picker-options">
                    <div class="option-picker-cell option spec" v-for="(spec,si) in specs">
                        <div class="title">{{ spec.title }}</div>
                        <div class="select">
                            <a href="javascript:;" :class="['btn btn-default btn-sm nav spec-item',(isChooseItem(si,ii) ? 'btn-danger':''),(specItemCanSelected(si,n.id) == false ? 'disabled':'')]"
                               :data-thumb="n.thumb" v-for="(n, ii) in spec.items" v-if="n.show" @click="selectOption(si,ii)"
                            > {{ n.title }} </a>
                        </div>
                    </div>
                    <div class="fui-cell-group" style="margin-top:0;margin-bottom:2rem;">
                        <div class="fui-cell">
                            <div class="fui-cell-label">数量</div>
                            <div class="fui-cell-info"></div>
                            <div class="fui-cell-mask noremark">
                                <div class="fui-number">
                                    <div :class="['minus',(inputMin>=inputNum ? 'disabled' : '')]" :disabled="inputMin>=inputNum" @click="inputMinus">-</div>
                                    <input class="num" type="tel" v-model="inputNum">
                                    <div :class="['plus',(inputNum >= inputMax ? 'disabled' : '')]" :disabled="inputNum >= inputMax" @click="inputPlus">+</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="z-index: 2;" class="fui-navbar">
                    <template v-if="openType.length > 0">
                        <a href="javascript:;" class="nav-item btn confirmbtn" @click="confirmBtn(openType)">确定</a>
                    </template>
                    <template v-else>
                        <a href="javascript:;" class="nav-item btn cartbtn" @click="confirmBtn('cart')">加入购物车</a>
                        <a href="javascript:;" class="nav-item btn buybtn" @click="confirmBtn('buy')">立刻购买</a>
                    </template>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var vuePicker = new Vue({
        el: '#vue_picker',
        data: {
            isShow:false
            ,isShowClass:false
            ,openType:''
            ,inputNum:1
            ,inputMin:1
            ,inputMax:5
            ,selectIndex:{}
            ,selectTitle:''
            ,optionId:0  // 当前选中的 ID
            ,optionPrice:0  // 当前选中的价格
            ,optionStock:0  // 当前选中的库存
            ,specItemDisabled:[]  // 禁止的 spec item id
            ,goods:{
                id:0
                ,minPrice:''
                ,maxPrice:''
                ,thumb:''
            }
            ,
            options:[]
            ,
            disabledOption:[]   // 没有库存了的选项
            ,
            specs:[]
            ,
            // 回调方法名称
            callbackFnName:'pickerCallBack' // (_goodsId,_optionId, _total,_type)
        }
        ,
        methods:{
            // 初始化
            init:function(options){
                var _that = this;

                _that.goods = options.data.goods;
                _that.specs = options.data.specs;
                _that.options = options.data.options;

                if(options.data.inputNum){
                    _that.inputNum = options.data.inputNum
                }
                if(options.data.inputMin){
                    _that.inputMin = options.data.inputMin
                }
                if(options.data.inputMax){
                    _that.inputMax = options.data.inputMax
                }

                if(options.callbackFnName){
                    _that.callbackFnName = options.callbackFnName;
                }

                for (var i = 0; i < _that.specs.length;i++){
                    Vue.set(_that.selectIndex, i, -1)
                }

                // 检测回调方法是否存在
                if(!window[_that.callbackFnName]){
                    alert('回调方法不存在');
                }

                // 初始化，如果 options 中包含 specs == _-----_ 为单个规格商品
                for (var i = 0; i < _that.options.length;i++){
                    if(_that.options[i].specs == '_-----_'){
                        _that.optionId = _that.options[i].id;
                        _that.optionPrice = _that.options[i].price;
                        _that.optionStock = _that.options[i].stock;
                    }
                }
            }
            ,
            // class 是否显示
            isChooseItem:function (_si, _ii) {
                var _that = this;
                return _that.selectIndex[_si] == _ii;
            }
            ,
            /**
             * 打开规格选择器
             * @param _type 类型，cart 购物车 ； buy 购买 ； 空字符串 让用户选择
             */
            openPicker:function (_type) {
                var _that = this;

                _that.openType = _type;

                _that.isShow = true;
                setTimeout(function () {
                    _that.isShowClass = true;
                },10)
            }
            ,
            // 关闭 规格窗口
            closePicker:function () {
                var _that = this;
                _that.isShowClass = false;
                setTimeout(function () {
                    _that.isShow = false;
                },300)
            }
            ,
            // 数量输入框 减
            inputMinus:function () {
                var _that = this;
                if (_that.inputMin >= _that.inputNum) {
                    return false;
                }
                this.inputNum--;
            }
            ,
            // 数量输入框 加
            inputPlus:function () {
                var _that = this;
                if (_that.inputNum >= _that.inputMax) {
                    return false;
                }
                this.inputNum++
            }
            ,
            // 确定按钮
            confirmBtn:function (_type) {
                var _that = this;

                if(!_that.isConfirm){
                    _that.showToast('请选择正确规格！')
                    return false;
                }

                window[_that.callbackFnName](_that.goods.id,_that.optionId,_that.inputNum,_type)

                _that.closePicker();
            }
            ,
            // 选择商品
            selectOption:function (_si,_ii) {
                console.log('selectOption')
                var _that = this;

                if(false == _that.specItemCanSelected(_si,_that.specs[_si]['items'][_ii]['id'])){
                    return false;
                }

                if(_that.selectIndex[_si] == _ii){
                    // 取消勾选
                    _that.selectIndex[_si] = -1
                }
                else{
                    // 勾选
                    _that.selectIndex[_si] = _ii
                }

                var titles = [];
                var specs = [];
                // 判断 如果 全部 都选了的话，显示正确的价格
                for(var i in _that.selectIndex){
                    if(_that.selectIndex[i] > -1){
                        // console.log(_that.specs[i]['items'][_that.selectIndex[i]]['title'])
                        titles.push(_that.specs[i]['items'][_that.selectIndex[i]]['title'])
                        specs.push(_that.specs[i]['items'][_that.selectIndex[i]]['id'])
                    }
                }
                _that.selectTitle = titles.join(';')

                if(titles.length == _that.specs.length){
                    var text = '_' + specs.join('_') + '_';
                    var xuanzhong = _that.options.filter(function (item) {
                        return item.specs == text
                    })
                    if(xuanzhong.length > 0){
                        _that.optionId = xuanzhong[0]['id'];
                        _that.optionPrice = xuanzhong[0]['price'];
                        _that.optionStock = xuanzhong[0]['stock'];
                        if(xuanzhong[0]['stock'] < 1){
                            _that.showToast('该规格没有库存了！')
                        }
                    }
                    else{
                        _that.optionPrice = 0;
                        _that.showToast('找不到规格，请刷新页面！')
                    }
                }
                else if(titles.length > 0 && titles.length < _that.specs.length){
                    // 有选中 ， 不过不是全部选中 判断出没有库存的，灰掉
                    _that.optionPrice = 0;
                }
                else{
                    _that.optionPrice = 0;
                }
            }
            ,
            // 子规格是否能选中
            specItemCanSelected:function (_si,_specItemId) {
                var _that = this;
                var _stock = 0; // 库存
                var specText = '_' + _specItemId + '_';

                var specs = [];
                for(var i in _that.selectIndex){
                    if(i == _si){
                        specs.push(_specItemId)
                    }
                    else{
                        if(_that.selectIndex[i] > -1){
                            specs.push(_that.specs[i]['items'][_that.selectIndex[i]]['id'])
                        }
                    }
                }

                if(!specs.length){
                    return true;
                }

                specText = '_' + specs.join('_') + '_';

                for(var j = 0; j < _that.options.length; j++){
                    if(_that.options[j].specs.indexOf(specText) > -1){
                        // 计算全部库存
                        _stock += _that.options[j].stock;
                    }
                }

                if(_stock > 0){
                    return true; // 能选，正常状态
                }
                else{
                    return false;
                }
            }
            ,
            // 获取已选的 子项 的ID ，拼接 成 的字符串  _1_2_
            getSpecItemIdText:function () {
                var _that = this;
                var specs = [];
                for(var i in _that.selectIndex){
                    if(_that.selectIndex[i] < 0){
                        continue;
                    }
                    specs.push(_that.specs[i]['items'][_that.selectIndex[i]]['id'])
                }

                return '_' + specs.join('_') + '_';
            }
            ,
            showToast:function (_msg) {
                FoxUI.toast.show(_msg);
            }
        }
        ,
        computed:{
            showPrice:function () {
                var _that = this;

                if(_that.optionPrice > 0){
                    return _that.optionPrice + '';
                }
                else{
                    return _that.goods.minPrice + '~' + _that.goods.maxPrice;
                }
            }
            ,
            // 是否可以确认
            isConfirm:function () {
                return this.optionStock > 0;
            }
        }
    });
</script>